<template>
  <div v-loading="loading">
    <Header></Header>
    <div class="button-nav p-40">
      <div class="box">
        <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex font-14">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>考试详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex space-between items-center mt-20">
          <div class="ml-10">
            考试分数
            <text class="color-red font-40">{{ exam.score }}</text>
            分；
          </div>
          <div class="flex items-center">
            <el-button type="" @click="dialogVisible = true">返回首页</el-button>
            <el-button type="" @click="() => { $router.push('/exam/index') }">返回考试列表</el-button>
          </div>
        </div>
        <div class="border-dash pt-30 pb-30 pl-20 pr-20 bg-white" v-for="(item, index) in list" :key="index">
          <div class="flex space-between">
            <div>{{ index+1 }}、{{ item.title }}</div>
            <div class="color-green" v-if="item.is_right === 1">回答正确</div>
            <div class="color-red" v-if="item.is_right === 0">回答错误</div>
          </div>
          <div class="pl-20 pr-20 mt-20" v-for="(itd, idx) in item.options_json" :key="idx">{{ idx }}、{{ itd }}</div>
          <div class="p-20 border-dash bg-grey mt-20">
            <div>正确答案：{{ item.result }} <text class="ml-30">你的答案：<text class="color-red">{{ item.user_answer === '' ? '无' :  item.user_answer }}</text></text></div>
            <div class="mt-20">解析：{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>

    <el-dialog
        v-model="dialogVisible"
        title="提示"
        width="30%"
    >
      <span>是否退出？</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="() => { $router.push('/') }">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { ElMessageBox } from 'element-plus'
import { getExamScore } from '@/api/api'
export default {
  name: "Questions",
  components: {
    Header, Footer
  },
  data() {
    return {
      dialogVisible: false,
      log_id: 0,
      type: null,
      list: [],
      exam: [],
        loading: true
    }
  },
  mounted() {
    this.log_id = this.$route.query.id
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const exam = await getExamScore({
        log_id: this.log_id,
        type: this.type
      })
      this.list = exam.questions
      this.exam = exam
        this.loading = false
    },
    setFilter(type) {
      this.type = type
      this.getDetail()
    }
  }
}
</script>

<style scoped>

</style>
